<#import "../common/layout.ftl" as layout/>
<#import "../common/dataTables.ftl" as dataTables/>
<#import "../common/modern-forms.ftl" as mform/>
<#import "../common/modal.ftl" as modal/>

<!DOCTYPE html>
<html>
<@layout.head title="角色管理">
    <@dataTables.head/>
    <@dataTables.buttons_head/>
    <@dataTables.select_head/>
    <@dataTables.editor_head/>
    <@mform.head/>
<style type="text/css">
    input[type=checkbox], input[type=radio] {
        margin: 0;
    }
</style>
</@layout.head>
<body>
<@layout.page>
<div class="main-box">
    <!-- 标题 -->
    <#--<h4 class="page-header">-->
        <#--<i class="fa fa-cog fa-spin"></i>-->
        <#--角色管理-->
    <#--</h4>-->
    <!-- 表格 -->
    <div class="content">
        <!-- 查询框 -->
        <@mform.container id="formQuery">
            <@mform.row>
            <#--<@mform.input_text id="cProcedureName" name="cProcedureName" size=6 label="" placeholder="请输入业务域名称" icon="fa-edit"/>-->
            <#--<@mform.input_text id="cProcedureName1" name="cProcedureName" size=6 label="" placeholder="请输入业务域名称" icon="fa-edit"/>-->
            </@mform.row>
        </@mform.container>
        <!-- 按钮 -->
        <div id="mRoleBtnGroup" class="btn-group">
            <button type="button" class="btn btn-blue btn-sm" onclick="javascript:querymRole();">
                <i class="fa fa-refresh"></i> 刷新
            </button>
            <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" onclick="javascript:newmRole();">
                <i class="fa fa-plus"></i> 新增
            </button>
            <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" onclick="javascript:delmRole();">
                <i class="fa fa-remove"></i> 删除
            </button>
        </div>
        <!-- 表格 -->
        <@dataTables.commonTable id="tabmRole"/>
        <!-- 弹出窗 -->
        <@modal.editModal id="modal-mRole" buttonId="btnmRoleSave" width="500px">
            <@mform.container id="userEditForm">
                <input type="hidden" name="cRoleID" id="cRoleID"/>
                <@mform.row>
                    <@mform.input_text id="iOrder" name="iOrder" size=12 label="序号" placeholder="请输入序号" icon="fa-edit"/>
                    <@mform.input_text id="cRoleName" name="cRoleName" size=12 label="角色名" placeholder="请输入角色名" icon="fa-edit"/>
                    <@mform.select2 id="bState" name="bState" size=12 label="记录状态">
                        <option value="-1">请选择</option>
                        <option value="1" selected="true">启用</option>
                        <option value="0">停用</option>
                    </@mform.select2>
                </@mform.row>
            </@mform.container>
        </@modal.editModal>
        <@modal.editModal id="roleASsystem" buttonId="saveRoleAsSystem" width="500px">
            <@mform.container id="rolesystemcon">
                <@mform.row>
                    <input id="roleID" name="roleID" type="hidden"/>
                    <input id="roleName" name="roleName" type="hidden"/>
                </@mform.row>
            </@mform.container>
            <@dataTables.commonTable id="tabRoleasSystem"/>
        </@modal.editModal>
    </div>
</div>
</@layout.page>

<@layout.foot>
    <@dataTables.foot/>
    <@dataTables.buttons_foot/>
    <@dataTables.select_foot/>
    <@dataTables.editor_foot/>
    <@mform.foot/>

<script type="text/javascript">
    $(function () {
        mRoleTable.queryData("rolemanage/queryAll");
    });
    var columns = [
        {"title": "序号", "data": "iOrder", "className": "editable tableColumns_center"},
        {"title": "角色名", "data": "cRoleName", "className": "editable tableColumns_center"},
        {"title": "状态", "data": "bState", "className": "editable tableColumns_center"},
        {"title": "描述", "data": "cDescribe", "className": "editable tableColumns_left"},
        {
            "title": "删除",
            "data": null,
            "className": "tableColumns_center",
            "defaultContent": '<button id="delRole" type="button" class="btn btn-link btn-table-icon" title="删除"><i class="fa fa-remove"></i></button>'
        },
        {
            "title": "设置系统",
            "data": null,
            "className": "tableColumns_center",
            "defaultContent": "<button type=\"button\" id=\"assystems\" class=\"btn btn-link btn-table-icon\" title=\"设置角色对应系统\"><i class='fa fa-exchange'></i></button>"
        }
    ];
    editor = new $.fn.dataTable.Editor({
        ajax: "${request.contextPath}/rolemanage/eidt",
        table: "#tabmRole",
        idSrc: "cRoleID",
        fields: [{
            label: "角色ID:",
            name: "cRoleID"
        }, {
            label: "序号:",
            name: "iOrder"
        }, {
            label: "角色名:",
            name: "cRoleName"
        }, {
            label: "状态:",
            name: "bState",
            type: "checkbox",
            separator: "|",
            options: [
                {label: '', value: 1}
            ]
        }, {
            label: "描述:",
            name: "cDescribe"
        }]
    });
    var mRoleTable = $('#tabmRole').winningTable({
        columns: columns,
        pageLength: 10,
        toolbar: "#mRoleBtnGroup",
        searching: true,
        buttons: [

        ],
        createdRow: function (row, data, dataIndex) {
            if (data.bState) {
                $('td', row).eq(2).html('启用');
            } else {
                $('td', row).eq(2).html('停用');
            }
        }
    });
    $('#tabmRole').on('click', 'tbody td.editable', function (e) {
        mRoleTable.dataTables.row($(this).closest('tr')).select();
        editor.inline(this, {
            onBlur: 'submit',
            submit: 'allIfChanged'
        });
//        alert($(".DTE_Field_InputControl").html());
//        var sel = "<select id=\"DTE_Field_bState\" class=\"form-control\">" +
//                "<option value =\"true\">true</option>" +
//                "<option value =\"false\">false</option>" +
//                "</select>";
//        $(".DTE_Field_InputControl").html(sel);
//        var option = "<option value =\"true\">true</option>" +
//                "<option value =\"false\">false</option>";
//        $("#DTE_Field_bState").html(option);
    });

    //按钮
    function querymRole() {
        mRoleTable.queryData("rolemanage/queryAll");
    }

    function newmRole() {
//        $('#tabmRole tr').each(function (index, el) {
//            $(this).removeClass('selected');
//        });
//        $('#modal-mRole').find(".modal-title").text('新增角色信息');
//        clearForm($('#modal-mRole'));
//        $("#btnmRoleSave").unbind();
//        $("#btnmRoleSave").click(savemRoleNew);
//        $('#modal-mRole').modal();
        mRoleTable.getSelectedRows().deselect();
        $.ajax({
            type: 'POST',
            url: '${request.contextPath}/rolemanage/new',
            success: function (data) {
                if (data.success) {
                    var rowData = {cRoleID: data.data, iOrder: "", cRoleName: "", bState: "", cDescribe: ""};
                    var row = mRoleTable.dataTables.row.add(rowData).draw(false).node();
                    //$(row).insertBefore(mRoleTable.dataTables.rows().nodes()[0]);
                    mRoleTable.dataTables.row(row).select();
                } else {
                    swal("错误", data.errorMsg, "error");
                }
            },
            error: function (xhr, type) {
                swal("错误", "系统发生内部错误!请稍后再试!", "error");
            }
        });
    }

    $('#tabmRole').on("click", "#delRole", function () {
        //alert($(this).closest('tr').index()); //行号
        mRoleTable.dataTables.row($(this).closest('tr')).select();
        delmRole();
    });

    function delmRole() {
        var datas = mRoleTable.getSelectedDatas();
        if (datas == null || datas.length == 0 || datas.length > 1) {
            swal("错误", "请选择一行数据", "error");
            return;
        }
        var data = datas[0];
        var cRoleID = data.cRoleID;
        swal({
            title: "确定删除",
            text: "是否确定删除此数据",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是的,确定",
            cancelButtonText: "取消"
        }).then(function (result) {
            if (result.value) {
                $.ajax({
                    type: 'POST',
                    data: 'cRoleID=' + cRoleID,
                    url: '${request.contextPath}/rolemanage/del',
                    success: function (data) {
                        //成功之后
                        if (data.success) {
                            var newRow = data.data;
                            mRoleTable.getSelectedRows().remove().draw(false);
                        }
                        else {
                            swal("错误", data.errorMsg, "error");
                        }
                    },
                    error: function (xhr, type) {
                        swal("错误", "系统发生内部错误!请稍后再试!", "error");
                    }
                });
            }
        });
    }

    // 选择系统
    var rAs_columns = [
        {
            "title": "active",
            "data": null,
            "className": "center",
            "defaultContent": "<input type=\"checkbox\" id=\"selectAction\" class=\"editor-active\"/>"
        },
        {"title": "系统名称", "data": "cSystemName"}
    ];
    var rAs_table = $('#tabRoleasSystem').winningTable({
        retrieve: true,
        columns: rAs_columns,
//        pageLength: 10,
//        searching: true,
//        scrollY: "70%",
        paging: false,
        fixedHeader: false,
        buttons: [],
        select: {style: 'multi'},
        "columnDefs": [{
            "targets": [0],
            "visible": false
        }],
        "createdRow": function (row, data, dataIndex) {
            if (data.active == '1') {
                rAs_table.dataTables.row(dataIndex).select();
            }
        }
    });
    $('#tabmRole').on("click", "#assystems", function () {
        var item = mRoleTable.dataTables.row($(this).closest('tr')).data();
        getSystems(item);
    });

    function getSystems(item) {
        clearForm($("#roleASsystem"));
        var $modal = $("#roleASsystem");
        $modal.find(".modal-title").text("角色系统关联");
        var cRoleID = item.cRoleID;
        var cRoleName = item.cRoleName;
        $("#roleID").val(cRoleID);
        $("#roleName").val(cRoleName);
        $("#saveRoleAsSystem").unbind();
        $("#saveRoleAsSystem").click(saveRoleAsSystem);
        $modal.modal();
        rAs_table.queryData("${request.contextPath}/rolemanage/queryRSassociation", {datas: "{\"cRoleID\":\"" + $("#roleID").val() + "\"}"});
    }

    function saveRoleAsSystem() {
        var data = {datas: "{\"cRoleID\":\"" + $("#roleID").val() + "\",\"selected\":" + JSON.stringify(rAs_table.getSelectedDatas().toArray()) + "}"};
        $.ajax({
            type: 'POST',
            data: data,
            url: '${request.contextPath}/rolemanage/save',
            success: function (data) {
                if (data.success) {
                    $.bootstrapGrowl("操作成功，给【" + $("#roleName").val() + "】设置了【" + data.data + "】个系统", {
                        type: 'success',
                        offset: {from: 'top', amount: 0},
                        align: 'center',
                        width: 'auto',
                        delay: 1000
                    });
                    $("#roleASsystem").modal('hide');
                }
                else {
                    swal("错误", data.errorMsg, "error");
                }
            },
            error: function (xhr, type) {
                swal("错误", "系统发生内部错误!请稍后再试!", "error");
            }
        });
    }
</script>
</@layout.foot>
</body>
</html>